$(function () {
    // 需求1.初始化文章分类列表
    // 因为添加,修改,删除都要重新渲染页面,所以封装函数
    let layer = layui.layer
    // 调用函数
    initArtCateList()
    // 封装函数
    function initArtCateList() {
        axios({
            method: "GET",
            url: '/my/article/cates',
        }).then(({
            data: res
        }) => {
            // console.log(res);
            if (res.status !== 0) {
                return layer.msg(res.message)
            }
            let arr = []
            res.data.forEach(ele => {
                if (ele.Id < 0) {
                    return

                }
                arr.push(
                    `
                    <tr>
                        <td>${ele.Id}</td>
                        <td>${ele.name}</td>
                        <td>${ele.alias}</td>
                        <td>
                            <button data-id="${ele.Id}" class=" btn-edit layui-but layui-but-xs">修改</button>
                            <button data-id="${ele.Id}" class=" del-edit layui-but layui-but-xs layui-btn-danger">删除</button>
                        </td>
                    </tr>
                `
                )
            });
            $("tbody").empty().html(arr.join(""))
        })
    }

    // 需求2
    let indexAdd = 0
    $("#addBtn").on('click', function () {
        indexAdd = layer.open({
            type: 1,
            title: '添加文章类别',
            area: ['500px','260px'],
            content: `<form  id = "addForm"class="layui-form" action="">
            <div class="layui-form-item">
              <label class="layui-form-label">分类名称</label>
              <div class="layui-input-block">
                <input type="text" name="name" required  lay-verify="required" placeholder="请输入分类名称" autocomplete="off" class="layui-input">
              </div>
            </div>
            <div class="layui-form-item">
            <label class="layui-form-label">分类别名</label>
            <div class="layui-input-block">
              <input type="text" name="alias" required  lay-verify="required" placeholder="请输入分类别名" autocomplete="off" class="layui-input">
            </div>
          </div>
            <div class="layui-form-item">
            <div class="layui-input-block">
              <button class="layui-btn" lay-submit lay-filter="formDemo">确认添加</button>
              <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
          </div>
        </form>
            `
        })
    })

    // 需求3
    $("body").on('submit', "#addForm", function (e) {
        // 阻止默认提交
        e.preventDefault()
        axios({
            method: 'POST',
            url: '/my/article/addcates',
            data: $(this).serialize()
        }).then(({
            data: res
        }) => {
            // console.log(res);

            if (res.status !== 0) {
                return layer.msg(res.message)

            }
            layer.msg("恭喜你,添加文章类别成功!")
            initArtCateList()
            layer.close(indexAdd)
        })

    })

    // 需求4.
    let indexEdit = 0
    $("tbody").on('click', ".btn-edit", function () {
        // 点击编辑按钮做两件事,弹出层
        indexEdit = layer.open({
            type: 1,
            title: '修改文章类别',
            area: ['500px', '260px'],
            content: `<form  id="editForm" class="layui-form" action="" lay-filter="editForm">
            <!-- 隐藏域,填充Id值,将来用来修改数据 -->
            <input type="hidden" name="Id" >
            <div class="layui-form-item">
              <label class="layui-form-label">分类名称</label>
              <div class="layui-input-block">
                <input type="text" name="name" required  lay-verify="required" placeholder="请输入分类名称" autocomplete="off" class="layui-input">
              </div>
            </div>
            <div class="layui-form-item">
            <label class="layui-form-label">分类别名</label>
            <div class="layui-input-block">
              <input type="text" name="alias" required  lay-verify="required" placeholder="请输入分类别名" autocomplete="off" class="layui-input">
            </div>
          </div>
            <div class="layui-form-item">
            <div class="layui-input-block">
              <button class="layui-btn" lay-submit lay-filter="formDemo">确认修改</button>
              <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
          </div>
        </form>
            `
        })
        // 点击编辑按钮做两件事,赋值
        let id = $(this).attr("data-id")
        // alert(id)
        axios({
            method: 'GET',
            url: '/my/article/cates/' + id
        }).then(({
            data: res
        }) => {
            // console.log(res);
            if (res.status !== 0) {
                return layer.msg(res.message)

            }
            layui.form.val("editForm", res.data)
        })
    })

    // 需求5：修改文章分类， 事件委托，事件代理
    $("body").on('submit', "#editForm", function (e) {
        // 阻止默认提交
        e.preventDefault()
        // 修改分类
        axios({
            method: 'POST',
            url: '/my/article/updatecate',
            data: $(this).serialize()
        }).then(({
            data: res
        }) => {
            // console.log(res);

            if (res.status !== 0) {
                return layer.msg(res.message)

            }
            layer.msg("恭喜你,修改文章类别成功!")
            initArtCateList()
            layer.close(indexEdit)
        })

    })

    // 6.删除
    $("tbody").on("click", ".del-edit", function (e) {
        // 获取自定义属性
        let id = $(this).attr("data-id")
        // alert(id)
        if (id == 1 || id == 3) {
            return layer.msg("不能删除前2条数据!")
        }
        layer.confirm("是否确定删除文章分类?", {
            icon: 3,
            title: '提示'
        }, function (index) {
            axios({
                // get可以省略
                url: '/my/article/deletecate/' + id
            }).then(({
                data: res
            }) => {
                if (res.status !== 0) {
                    return layer.msg(res.message)
                }
                layer.msg("恭喜您,删除文章类别成功!")
                initArtCateList()
            })
            layer.close(index)
        })


    })
})